<template>
    <div class="app-portal-tabs">
        <div class="app-portal-hd-icon" :style="getIconStyle(app)" @click="handleAppToggle"
             v-tippy="{ arrow: true }" content="切换应用">
            <img v-if="getIconImg(app)" :src="getIconImg(app)" />
            <template v-else-if="getIconFont(app)">
                <i :class="getIconFont(app)"></i>
            </template>
            <i v-else class="fa fa-question-circle"></i>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('menu')" :class="{ 'active': tabActive === 'menu' }">
            <i class="fa fa-delicious"></i>
            <span>菜单</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('form')" :class="{ 'active': tabActive === 'form' }">
            <i class="fa fa-list-alt1"></i>
            <span>表单</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('page')" :class="{ 'active': tabActive === 'page' }">
            <i class="fa fa-file-alt1"></i>
            <span>页面</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('dcomp')" :class="{ 'active': tabActive === 'dcomp' }">
            <i class="fa fa-vuejs"></i>
            <!--<span>页面</span>-->
            <span>组件</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('report')" :class="{ 'active': tabActive === 'report' }">
            <i class="fa fa-chart-pie"></i>
            <span>报表</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('mb')" :class="{ 'active': tabActive === 'mb' }">
            <i class="fa fa-bars"></i>
            <span>码表</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('microsvc')" :class="{ 'active': tabActive === 'microsvc' }">
            <i class="fa fa-docker"></i>
            <span>微服务</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('func')" :class="{ 'active': tabActive === 'func' }">
            <i class="fa fa-node-js" style="font-size: 18px"></i>
            <span>云函数</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('task')" :class="{ 'active': tabActive === 'task' }">
            <i class="fa fa-tasks" style="font-size: 18px"></i>
            <span>任务</span>
        </div>
        <div class="app-portal-tab" @click="handleSelectTab('hook')" :class="{ 'active': tabActive === 'hook' }">
            <i class="fa fa-superpowers" style="font-size: 18px"></i>
            <span>切面</span>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    // import appsCore     from './apps-core';
    import common       from '../../common/common';

    export default {
        props: {
            app: Object
        },
        data() {
            return {
                tabActive: 'menu',
                currentType: '',    // form page menu
            }
        },
        components: {
            // appsCore,
        },
        created () {
            // this.pid = this.$route.query.pid;
        },
        mounted () {

        },
        watch: {

        },
        filters: {

        },
        computed: {
            ...mapState([
                'loginUser',
                'project'
            ]),
        },
        methods: {
            ...common,
            handleSelectTab(type) {
                this.tabActive = type;
            },
        }
    }
</script>
